#natext {
    .bookshelf {
        .shelf-surface {
            height: 180px;
            background: url(../images/bookshelf-surface.jpg) left bottom repeat-x;
            position: relative;
            &:after,
            &:before {
                content: '';
                display: block;
                .square(48px);
                position: absolute;
                bottom: 0;
                z-index: 0;
                background-image: url(../images/bookshelf-sides.jpg);
                background-repeat: no-repeat;
            }
            &:before {
                background-position: left bottom;
                left: 0;
            }
            &:after {
                background-position: right bottom;
                right: 0;
            }

            .book-collection {
                @book-height: 145px;

                height: @book-height;
                padding: 0 30px;
                position: relative;
                z-index: 20;

                .books {
                    float: left;

                    &,
                    li {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                    }

                    li {

                        .display-inline-block();
                        position: relative;
                        height: @book-height;
                        min-width: 80px;
                        background: #ccc;
                        margin: 0 10px;
                        .box-shadow(0 0 5px #666);

                        &:hover {
                            .box-shadow(0 0 10px #000);
                            outline: #fff 1px solid;
                        }

                        img {
                            max-height: @book-height;
                            height: auto;
                            width: auto;
                        }

                        .close {
                            .square(20px);
                            position: absolute;
                            right: -10px;
                            top: -10px;
                            border: #fff 2px solid;
                            .border-radius(50%);
                            .box-shadow(0 0 3px #333);
                            background-color: black;
                            cursor: pointer;
                            color: #ddd;
                            font: bold 18px/19px Arial, sans-serif;
                            text-align: center;
                            .opacity(0);
                            display: block;
                            .transition(opacity 0.6s);

                            &:focus,
                            &:active {
                                cursor: pointer;
                            }
                        }
                        &:hover .close {
                            .opacity(90);
                            .transition(opacity 0.3s);
                        }
                    }
                }

                .add-new {
                    .size(42px, @book-height);
                    padding-left: 20px;
                    float: left;

                    a {
                        @bcolor: #ddd;

                        display: block;
                        .square(40px);
                        background-color: @bcolor;
                        overflow: hidden;
                        font: bold 50px/40px Arial, sans-serif;
                        text-align: center;
                        border: darken(@bcolor, 5%) 1px solid;
                        .border-radius(3px);
                        .opacity(70);
                        .transition(opacity 0.3s);
                        margin-top: 50px;

                        &,
                        &:hover,
                        &:active {
                            text-decoration: none;
                            color: darken(@bcolor, 20%);
                        }
                        &:hover {
                            .opacity(100);
                        }
                    }
                }
            }
        }

        .editor {
            display: none;

            .left-col {
                float: left;
                margin-right: 20px;
                text-align: center;

                .book {
                    .featured-image {
                        border: #fff 2px solid;
                        .box-shadow(0 0 15px #999);

                        img {
                            max-width: 200px;
                            vertical-align: middle;
                        }
                    }
                }
            }

            .right-col {
                overflow: hidden;

                [name="post_title"] {
                    padding: 5px;
                    font-size: 1.8em;
                    line-height: 1.3;
                    width: 99%;
                }

                ul {
                    textarea,
                    input[type="text"] {
                        width: 60%;
                    }

                    textarea {
                        resize: vertical;
                    }
                }
            }
        }
    }
}